<template>
  <el-card class="table-card" shadow="never">
    <template #header>
      <div class="card-header">
        <div class="header-left">
          <span>采购订单列表</span>
          <el-tag type="info">{{ pagination.total }} 条记录</el-tag>
        </div>
        <div class="header-right">
          <el-button-group>
            <el-button 
              :icon="Sort" 
              @click="handleSort('orderNumber')" 
              class="sort-btn"
              :class="{ 'sort-active': currentSortField === 'orderNumber' }"
            >
              按订单号排序
            </el-button>
            <el-button 
              :icon="Sort" 
              @click="handleSort('createTime')" 
              class="sort-btn"
              :class="{ 'sort-active': currentSortField === 'createTime' }"
            >
              按创建时间排序
            </el-button>
          </el-button-group>
          
          <el-button 
            link
            :icon="Setting" 
            @click="showColumnSettings"
            class="settings-btn"
          >
            列设置
          </el-button>
        </div>
      </div>
    </template>
    
    <el-table
      :data="purchaseOrders"
      v-loading="loading"
      element-loading-text="加载中..."
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      @selection-change="handleSelectionChange"
      @row-click="handleRowClick"
      @sort-change="handleSortChange"
      row-class-name="purchase-order-row"
      class="purchase-order-list"
      highlight-current-row
      stripe
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="orderNumber" label="订单号" width="150" sortable fixed />
      <el-table-column prop="supplierName" label="供应商" width="150" />
      <el-table-column prop="orderDate" label="下单日期" width="120" />
      <el-table-column prop="expectedDeliveryDate" label="预计到货日期" width="120" />
      <el-table-column prop="totalAmount" label="订单金额" width="120" sortable>
        <template #default="scope">
          ¥{{ scope.row.totalAmount.toLocaleString() }}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="100">
        <template #default="scope">
          <el-tag :type="getStatusType(scope.row.status)">{{ getStatusText(scope.row.status) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="purchaser" label="采购员" width="100" />
      <el-table-column prop="remark" label="备注" width="150" />
      <el-table-column label="操作" width="200" fixed="right">
        <template #default="scope">
          <el-button 
            size="small" 
            @click.stop="viewDetail(scope.row)"
            class="action-btn detail-btn"
          >
            详情
          </el-button>
          <el-button 
            size="small" 
            @click.stop="editOrder(scope.row)"
            class="action-btn edit-btn"
          >
            编辑
          </el-button>
          <el-dropdown @command="handleMoreAction">
            <el-button size="small" class="el-dropdown-link more-btn">
              更多<el-icon class="el-icon--right"><arrow-down /></el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item :command="{action: 'print', row: scope.row}">
                  <el-icon><Printer /></el-icon>打印订单
                </el-dropdown-item>
                <el-dropdown-item :command="{action: 'export', row: scope.row}">
                  <el-icon><Download /></el-icon>导出订单
                </el-dropdown-item>
                <el-dropdown-item :command="{action: 'confirm', row: scope.row}" divided v-if="scope.row.status === 'pending'">
                  <el-icon><Checked /></el-icon>确认订单
                </el-dropdown-item>
                <el-dropdown-item :command="{action: 'cancel', row: scope.row}" v-if="scope.row.status === 'pending' || scope.row.status === 'confirmed'">
                  <el-icon><Close /></el-icon>取消订单
                </el-dropdown-item>
                <el-dropdown-item :command="{action: 'delete', row: scope.row}" divided>
                  <el-icon><Delete /></el-icon>删除订单
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    
    <div class="pagination-container">
      <el-pagination
        v-model:current-page="pagination.page"
        v-model:page-size="pagination.limit"
        :total="pagination.total"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits } from 'vue'
import { 
  Sort, Setting, Printer, Download, Checked, 
  Close, Delete, ArrowDown 
} from '@element-plus/icons-vue'

interface PurchaseOrder {
  id: number
  orderNumber: string
  supplierId: number
  supplierName: string
  orderDate: string
  expectedDeliveryDate: string
  totalAmount: number
  status: string
  purchaser: string
  remark: string
}

interface Pagination {
  page: number
  limit: number
  total: number
}

const props = defineProps<{
  purchaseOrders: PurchaseOrder[]
  loading: boolean
  pagination: Pagination
  selectedOrders: PurchaseOrder[]
}>()

const emit = defineEmits<{
  (e: 'selection-change', selection: PurchaseOrder[]): void
  (e: 'row-click', row: PurchaseOrder): void
  (e: 'sort-change', sort: { column: any, prop: string, order: string }): void
  (e: 'sort', field: string): void
  (e: 'view-detail', order: PurchaseOrder): void
  (e: 'edit', order: PurchaseOrder): void
  (e: 'more-action', command: { action: string, row: PurchaseOrder }): void
  (e: 'size-change', size: number): void
  (e: 'current-change', page: number): void
  (e: 'column-settings'): void
}>()

const currentSortField = ref('')

const handleSelectionChange = (selection: PurchaseOrder[]) => {
  emit('selection-change', selection)
}

const handleRowClick = (row: PurchaseOrder) => {
  emit('row-click', row)
}

const handleSortChange = (sort: { column: any, prop: string, order: string }) => {
  emit('sort-change', sort)
}

const handleSort = (field: string) => {
  currentSortField.value = field
  emit('sort', field)
}

const viewDetail = (order: PurchaseOrder) => {
  emit('view-detail', order)
}

const editOrder = (order: PurchaseOrder) => {
  emit('edit', order)
}

const handleMoreAction = (command: { action: string, row: PurchaseOrder }) => {
  emit('more-action', command)
}

const handleSizeChange = (size: number) => {
  emit('size-change', size)
}

const handleCurrentChange = (page: number) => {
  emit('current-change', page)
}

const showColumnSettings = () => {
  emit('column-settings')
}

const getStatusType = (status: string) => {
  switch (status) {
    case 'pending': return 'info'
    case 'confirmed': return 'warning'
    case 'shipped': return 'primary'
    case 'completed': return 'success'
    case 'cancelled': return 'danger'
    default: return 'info'
  }
}

const getStatusText = (status: string) => {
  switch (status) {
    case 'pending': return '待确认'
    case 'confirmed': return '已确认'
    case 'shipped': return '已发货'
    case 'completed': return '已完成'
    case 'cancelled': return '已取消'
    default: return '未知'
  }
}
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.table-actions {
  display: flex;
  gap: 12px;
}

.purchase-order-list {
  margin-bottom: 20px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

/* 按钮动画效果 */
.sort-btn,
.settings-btn,
.action-btn,
.more-btn {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.sort-btn:hover,
.settings-btn:hover,
.action-btn:hover,
.more-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.sort-btn:active,
.settings-btn:active,
.action-btn:active,
.more-btn:active {
  transform: translateY(0);
}

.sort-btn::after,
.settings-btn::after,
.action-btn::after,
.more-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.sort-btn:active::after,
.settings-btn:active::after,
.action-btn:active::after,
.more-btn:active::after {
  width: 300px;
  height: 300px;
}

/* 激活状态的排序按钮 */
.sort-active {
  background-color: #409eff;
  color: white;
  border-color: #409eff;
}

.sort-active:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
}

/* 详情按钮样式 */
.detail-btn {
  background-color: #409eff;
  border-color: #409eff;
  color: white;
}

.detail-btn:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
}

/* 编辑按钮样式 */
.edit-btn {
  background-color: #e6a23c;
  border-color: #e6a23c;
  color: white;
}

.edit-btn:hover {
  background-color: #ebb563;
  border-color: #ebb563;
}

/* 下拉按钮样式 */
.more-btn {
  background-color: #909399;
  border-color: #909399;
  color: white;
}

.more-btn:hover {
  background-color: #a6a9ad;
  border-color: #a6a9ad;
}

/* 表格行悬停效果 */
.purchase-order-row:hover {
  background-color: #f5f7fa !important;
  transform: scale(1.005);
  transition: all 0.3s ease;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .card-header {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
  
  .header-right {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
  }
  
  .sort-btn {
    flex: 1;
    min-width: 120px;
  }
  
  .settings-btn {
    margin-left: 0;
  }
}
</style>